<template>
	<div class="bg-white p-4">
		<t-button class="mb-4" @click="addAuthority">添加</t-button>
		<t-table
		:data="data"
		row-key="index"
		:columns="columns"
		bordered
		stripe
		:pagination="{ total: data.length }"
		>
			<template #operation="{ row }">
				<div class="flex">
					<t-button variant="text" theme="primary" @click="openDialog(row)">编辑</t-button>
					<t-button class="ml-2" variant="text" theme="danger" @click="deleteAuthority(row)">删除</t-button>
				</div>
			</template>
		</t-table>
		<!-- 编辑弹窗 -->
		<t-dialog
		:visible.sync="visibleBody"
		header="权限编辑"
		:onConfirm="confirmDialog"
		>
			<t-form labelAlign="top" :data="formData" ref="form" :rules="rules" @reset="onReset" @submit="onSubmit" name="update">
				<t-form-item name="a_name" label="权限名称">
					<t-input v-model="formData.a_name" placeholder="请输入权限名称"></t-input>
				</t-form-item>
				<t-form-item name="a_option" label="权限设定">
					<t-tree :data="items" checkable :expandLevel="2" hover :onChange="treeChange" v-model="authorityValue"></t-tree>
				</t-form-item>
			</t-form>
		</t-dialog>
		<!-- 添加弹窗 -->
		<t-dialog
		:visible.sync="addBody"
		header="添加权限"
		:onConfirm="addConfirmDialog"
		>
			<t-form labelAlign="top" :data="addFormData" ref="addForm" :rules="rules" @reset="onReset" @submit="addSubmit" name="add">
				<t-form-item name="a_name" label="权限名称">
					<t-input v-model="addFormData.a_name" placeholder="请输入权限名称"></t-input>
				</t-form-item>
				<t-form-item name="a_info" label="权限设定">
					<t-tree :data="items" checkable :expandLevel="2" hover :onChange="treeChange" v-model="authorityValue"></t-tree>
				</t-form-item>
			</t-form>
		</t-dialog>
	</div>
</template>

<script>
	import { getUserId } from '@/unit/auth'
	import dayjs from 'dayjs'

	export default {
		name: 'Authority',
		data() {
			return {
				data: [],
				columns: [
					{ colKey: 'authority_id', title: '编号' },
					{ colKey: 'a_name', title: '权限名称' },
					{ colKey: 'a_creater_name', title: '编辑人' },
					{ colKey: 'a_creater_date', title: '编辑时间' },
					{ colKey: 'operation', title: '操作' }
				],
				visibleBody: false,
				formData: {
					a_name: '',
					a_info: '',
					a_creater_id: getUserId(),
					a_creater_date: dayjs().format('YYYY-MM-DD'),
					authority_id: ''
				},
				rules:  { a_name: [{required: true, message: '权限名称不能为空', type: 'error',}] },
				authorityValue: [],
				addBody: false,
				addFormData: {
					a_name: '',
					a_info: '',
					a_creater_id: getUserId(),
					a_creater_date: dayjs().format('YYYY-MM-DD'),
				},
				items: [
					{
						value: '所有权限',
						label: '所有权限',
						children: [
							{
								value: '查看权限',
								label: '查看权限',
								children: [
									{ value: 'Dashboard', label: '仪表盘' },
									{
										value: 'User',
										label: '员工管理',
										children: [
											{value: 'Organization', label: '组织架构'}, 
											{value: 'Authority', label: '权限管理'},
											{value: 'UserSpace', label: '个人空间'},
										]
									},{
										value: 'Attendance',
										label: '考勤管理',
										children: [
											{value: 'AttendanceSheet', label: '考勤表'}, 
											{value: 'LeaveWork', label: '加班调休'}, 
											{value: 'Setting', label: '考勤设置'}
										]
									},{
										value: 'Project',
										label: '项目管理',
										children: [
											{value: 'Progress', label: '项目进度'}, 
											{value: 'ProjectList', label: '项目列表'}
										]
									},{
										value: 'Suggestion',
										label: '投票留言',
										children: [
											{value: 'Vote', label: '投票'}, 
											{value: 'Message', label: '留言'}
										]
									}
								]
							},{
								value: '操作权限',
								label: '操作权限',
								children: [
									{
										value: '我的审批',
										label: '我的审批',
										children: [
											{value: '请假审批', label: '请假审批'}, 
											{value: '加班审批', label: '加班审批'}, 
											{value: '工资审批', label: '工资审批'}
										]
									},{
										value: '员工操作',
										label: '员工操作',
										children: [
											{value: '部门管理', label: '部门管理'}, 
											{value: '岗位管理', label: '岗位管理'}, 
											{value: '添加员工', label: '添加员工'}, 
											{value: '工资结算', label: '工资结算'}, 
											{value: '查看员工详情', label: '查看员工详情'}, 
											{value: '操作员工状态', label: '操作员工状态'}
										]
									},{
										value: '员工详情',
										label: '员工详情',
										children: [
											{value: '编辑详情', label: '编辑详情'}, 
											{value: '转正办理', label: '转正办理'}, 
											{value: '离职办理', label: '离职办理'}, 
											{value: '保险办理', label: '保险办理'},
											{value: '编辑保险', label: '编辑保险'},
											{value: '查询工资对方工资记录', label: '查询工资对方工资记录'}
										]
									},{
										value: '查看考勤表',
										label: '查看考勤表',
										children: [
											{value: '查看公司考勤表', label: '查看公司考勤表'}, 
											{value: '查看本部门考勤表', label: '查看本部门考勤表'}, 
											{value: '查看其他部门考勤表', label: '查看其他部门考勤表'}, 
											{value: '查看个人考勤表', label: '查看个人考勤表'}
										]
									},{
										value: '考勤信息设置',
										label: '考勤信息设置',
										children: [
											{value: '初始化考勤系统', label: '初始化考勤系统'}, 
											{value: '节假日发布', label: '节假日发布'}
										]
									},{
										value: '项目设置',
										label: '项目设置',
										children: [
											{value: '添加项目', label: '添加项目'}, 
											{value: '删除项目', label: '删除项目'},
											{value: '编辑项目', label: '编辑项目'},
											{value: '控制项目进度', label: '控制项目进度'},
											{value: '上传源文件', label: '上传源文件'},
											{value: '上传项目相册', label: '上传项目相册'},
											{value: '删除项目相册', label: '删除项目相册'}
										]
									}
								]
							}
						]
					}
				]
			}
		},
		watch: {
			visibleBody(newValue){
				if(!newValue){
					this.$refs.form.reset()
					this.authorityValue = []
				}
			},
			addBody(newValue){
				if(!newValue){
					this.$refs.addForm.reset()
					this.authorityValue = []
				}
			},
		},
		methods: {
			// 删除权限
			deleteAuthority(row){
				const body = { authority_id: row.authority_id }
				this.$store.dispatch('activity/deleteActivity', body).then(res => {
					if(res.status === 0){
						this.$message.success(res.message)
						this.getActivityList()
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 添加提交
			addSubmit({ validateResult, firstError }){
				if (validateResult === true) {
					this.$store.dispatch('activity/addActivity', this.addFormData).then(res => {
						if(res.status === 0){
							this.$message.success(res.message)
							this.addBody = false
							this.getActivityList()
						} else {
							this.$message.error(res.message)
						}
					})
				} else {
					this.$message.warning(firstError);
				}
			},
			// 添加弹窗确认按钮
			addConfirmDialog(){
				this.$refs.addForm.submit()
			},
			// 打开添加弹窗
			addAuthority(){
				this.addBody = true
			},
			// 权限变化时触发
			treeChange(value){
				let str = ''
				value.map((item, index) => {
					if(index === 0){
						str = item
					} else {
						str = str + '@' + item
					}
				})
				this.formData.a_info = str
				this.addFormData.a_info = str
			},
			// 重置表单
			onReset(){},
			// 提交表单
			onSubmit({ validateResult, firstError }){
				if (validateResult === true) {
					this.$store.dispatch('activity/updateActivity', this.formData).then(res => {
						if(res.status === 0){
							this.$message.success(res.message)
							this.visibleBody = false
							this.getActivityList()
						} else {
							this.$message.error(res.message)
						}
					})
				} else {
					this.$message.warning(firstError);
				}
			},
			// 打开编辑弹窗
			openDialog(data){
				this.visibleBody = true
				this.formData.a_name = data.a_name
				this.formData.authority_id = data.authority_id
				this.formData.a_info = data.a_info
				let arr = data.a_info.split('@')
				this.authorityValue = arr
			},
			// 弹窗确认按钮
			confirmDialog(){
				this.$refs.form.submit()
			},
			// 获取权限列表
			getActivityList(){
				this.$store.dispatch('activity/getActivityList').then(res => {
					if(res.status === 0){
						this.data = res.data
					}
				})
			}
		},
		created() {
			this.getActivityList()
		}
	}
</script>